<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="firstDiv">
        <div id="scecondDiv"></div>
        <div></div>
    </div>
    <script>
        const mutationobserver = new MutationObserver((mutationrecord) => {
            console.log(mutationrecord)
        })

        // 如果subtree为false, 目标节点的子节点变化不会触发回调, 反之触发
        // attributeOldValue为true就会记录旧的属性值, 默认会把attribute设为true
        mutationobserver.observe(document.body,{ 
            subtree: true,
            attributeOldValue: true
        })  

        const div3 = document.body.childNodes[1].childNodes[3]

        div3.setAttribute('classname', 'div3')
        div3.setAttribute('classname', 'div3classname')
        
    </script>
</body>
</html>